<template>
  <div class="container p-4 max-w-6xl">
    <div v-if="store.state.designer" class="bg-white bg-opacity-60 backdrop-blur-md rounded-md p-2">
      <!-- 设计师信息 -->
      <div class="flex flex-wrap">
        <div class="py-3 w-full md:w-1/2">
          <span class="p-2 bg-gray-100 rounded-md border-2 mr-2">
            <i class="far fa-fw fa-hashtag"></i>
            <span class="ml-2">姓名</span>
          </span>
          <span>{{ store.state.designer.name }}</span>
        </div>
        <div class="py-3 w-full md:w-1/2">
          <span class="p-2 bg-gray-100 rounded-md border-2 mr-2">
            <i class="far fa-fw fa-venus-mars"></i>
            <span class="ml-2">性别</span>
          </span>
          <span>{{ store.state.designer.gender }}</span>
        </div>
        <div class="py-3 w-full md:w-1/2">
          <span class="p-2 bg-gray-100 rounded-md border-2 mr-2">
            <i class="far fa-fw fa-phone"></i>
            <span class="ml-2">电话</span>
          </span>
          <span>{{ store.state.designer.phone }}</span>
        </div>
        <div class="py-3 w-full md:w-1/2">
          <span class="p-2 bg-gray-100 rounded-md border-2 mr-2">
            <i class="far fa-fw fa-user"></i>
            <span class="ml-2">个人介绍</span>
          </span>
          <span>{{ store.state.designer.description }}</span>
        </div>
        <div class="py-3 w-full md:w-1/2">
          <span class="p-2 bg-gray-100 rounded-md border-2 mr-2">
            <i class="far fa-fw fa-graduation-cap"></i>
            <span class="ml-2">学历</span>
          </span>
          <span>{{ store.state.designer.education.value }}</span>
        </div>
        <div class="py-3 w-full md:w-1/2">
          <span class="p-2 bg-gray-100 rounded-md border-2 mr-2">
            <i class="far fa-fw fa-book-open"></i>
            <span class="ml-2">专业</span>
          </span>
          <span>{{ store.state.designer.profession }}</span>
        </div>
        <div class="py-3 w-full md:w-1/2">
          <span class="p-2 bg-gray-100 rounded-md border-2 mr-2">
            <i class="far fa-fw fa-school"></i>
            <span class="ml-2">毕业院校</span>
          </span>
          <span>{{ store.state.designer.school }}</span>
        </div>
      </div>

      <!-- 添加专辑 -->
      <div class="flex justify-end p-2">
        <router-link to="/designer/createalbum">
          <Button icon="pi pi-plus" label="添加专辑" class="p-button-sm" />
        </router-link>
      </div>

      <!-- 个人专辑 -->
      <DataTable
        :value="albums"
        :resizableColumns="true"
        columnResizeMode="fit"
        showGridlines
        responsiveLayout="scroll"
        class="p-datatable-sm min-h-[688px]"
      >
        <Column header="封面">
          <template #body="props">
            <img :src="props.data.picture + '/thumb'" alt="用户头像" height="96" width="96" />
          </template>
        </Column>
        <Column field="name" header="名称"></Column>
        <Column field="description" header="简介"></Column>
        <Column field="created" header="创建日期"></Column>
        <Column header="查看">
          <template #body="props">
            <a
              class="text-indigo-500"
              :href="'/designer/album/' + props.data.waid"
              target="_blank"
            >查看</a>
            <span class="text-red-500 cursor-pointer ml-2" @click="_deleteAlbum(props.data.waid)">删除</span>
          </template>
        </Column>
        <template #footer v-if="albums?.length === 0">
          <div class="flex justify-center text-2xl">空空如也~</div>
        </template>
      </DataTable>
      <Paginator
        :rows="10"
        :totalRecords="totalRecords"
        @page="_getAlbum(store.state.designer.fdid, $event.page + 1)"
      />
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'DesignerCenter'
})
</script>

<script lang="ts" setup>
import { defineComponent, ref } from 'vue'
import { getAlbumInfo } from '@/api/designer/designer'
import { getMyDesignerInfo } from '@/api/designer/designer'
import { useToast } from 'primevue/usetoast'
import { useStore } from 'vuex'
import { useConfirm } from 'primevue/useconfirm'
import { deleteAlbum } from '@/api/designer/designer'

import DataTable from 'primevue/datatable'
import Column from 'primevue/column'
import Paginator from 'primevue/paginator'
import Button from 'primevue/button'

let toast = useToast()
let confirm = useConfirm()
const store = useStore()

const albums = ref<any>()
const totalRecords = ref(1)
const curPage = ref(1)

function _deleteAlbum(waid: number | string) {
  confirm.require({
    message: '确定删除该专辑?',
    header: '删除专辑',
    icon: 'pi pi-exclamation-triangle',
    accept: () => {
      deleteAlbum(waid)
        .then(() => {
          toast.add({
            severity: 'success',
            summary: '删除成功',
            detail: '专辑已删除',
            life: 3000
          })
          _getAlbum(store.state.designer.fdid, curPage.value)
        })
        .catch(err => {
          toast.add({
            severity: 'error',
            summary: '删除失败',
            detail: err.data.msg,
            life: 3000
          })
        })
    },
    reject: () => {}
  })
}

function _getAlbum(fdid: number, page?: number) {
  getAlbumInfo(fdid, page)
    .then(res => {
      albums.value = res.data.list
      totalRecords.value = res.data.total
      curPage.value = res.data.pageNum
    })
    .catch(err => {
      toast.add({
        severity: 'error',
        summary: '获取专辑失败',
        detail: err.data.msg,
      })
    })
}

if (!store.state.designer) {
  getMyDesignerInfo()
    .then((res) => {
      store.commit('setDesigner', res.data)
      _getAlbum(store.state.designer.fdid)
    })
} else {
  _getAlbum(store.state.designer.fdid)
}
</script>